<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="关键词" prop="keyword">
        <el-input
          v-model="queryParams.keyword"
          placeholder="申请单号/开单人/消费人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="开单所属机构" prop="comId">
        <SelectCompany
          :defaultValue.sync="queryParams.comId"
          :companyType="0"
          :isAll="true"
          placeholder="请选择服务机构"
          @change="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单归属渠道" prop="channelId">
        <div style="max-width:calc(20vw - 100px);min-width: 215px;">
          <treeselect
            v-model="queryParams.channelId"
            :options="channelOptions"
            :show-count="true"
            placeholder="请选择渠道"
            noResultsText="暂无数据"
            @select="handleQuery"
            />
        </div>
      </el-form-item>
      <el-form-item label="开单日期">
        <el-date-picker
          v-model="createTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          @change="handleQuery"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="申请单号" align="center" prop="applyNo" width="120" />
      <el-table-column label="审核状态" align="center" prop="apStatus" width="100">
        <template slot-scope="{row}">
          <dict-tag :options="dict.type.dp_review_status" :value="row.apStatus" />
        </template>
      </el-table-column>
      <el-table-column
        label="患者信息"
        align="center"
        width="200"
      >
        <template slot-scope="{row}">
          <div>
            <span>{{ row.patientName }}</span>
            <span class="pl-5">{{ row.patientSex === 1 ? '女' : '男' }}</span>
            <span class="pl-5">{{ row.patientAge }} 岁</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="患者主诉" align="center" prop="patientPrincipal" width="220" />
      <el-table-column label="开单申请人" align="center" width="200">
        <template slot-scope="{row}">
          <div>
            <span>{{ row.applyExpertName }}</span>
            <span class="pl-5">{{ row.applyExpertPhone }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="疾病诊断"
        align="center"
        prop="typesResult"
        width="220"
      />
      <el-table-column label="开单时间" align="center" prop="applyDate" width="150" />
      <el-table-column label="开单所属机构" align="center" prop="applyCompanyName" width="220" />
      <el-table-column label="审核机构" align="center" prop="apCompanyName" width="150" />
      <el-table-column label="审核人" align="center" prop="apExpertName" width="150" />
      <el-table-column label="审核时间" align="center" prop="apDate" width="150" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="120px"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleDetails(scope.row.id)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <OrderDetails ref="OrderDetails" />
  </div>
</template>

<script>
import { getDPOrderList } from '@/api/dpReview';
import SelectCompany from "@/components/SelectCompany";
import { treeselect } from "@/api/channel/channel";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import OrderDetails from './orderDetails';

export default {
  name: "Order",
  dicts: ['dp_review_status'],
  components: {
    SelectCompany,
    Treeselect,
    OrderDetails
  },
  data () {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      createTime: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: "",
        comId: undefined,
        channelId: undefined,
        orderStartTime: "",
        orderEndTime: ""
      },
      // 总条数
      total: 0,
      dataList: [],
      // 渠道树选项
      channelOptions: [],
    }
  },
  created() {
    this.getList();
    this.getTreeselect();
  },
  activated() {
    this.getList();
    this.getTreeselect();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      this.queryParams.orderStartTime = this.createTime && this.createTime.length ? this.createTime[0] : "";
      this.queryParams.orderEndTime = this.createTime && this.createTime.length ? this.createTime[1] : "";
      getDPOrderList(this.queryParams)
        .then((response) => {
          this.dataList = response.rows;
          this.total = response.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.createTime = [];
      Object.assign(this.$data.queryParams, this.$options.data().queryParams);
      this.getList();
    },
    /** 查询渠道下拉树结构 */
    getTreeselect() {
      treeselect().then((response) => {
        this.channelOptions = response.data;
      });
    },
    handleDetails(id) {
      this.$refs.OrderDetails.openModal(id);
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
